

import { ref } from 'vue'

export default function windowResize() {
  //指向最外层容器
  const screenRef = ref()
  //定时器
  const timer = ref(0)
  //默认缩放值
  const scale = {
    width: '1',
    height: '1'
  }
  //设计稿尺寸（px）
  const baseWidth = 1920
  const baseHeight = 1080
  // 需要保持的比例（默认1.77778）
  const baseProportion = parseInt((baseWidth / baseHeight).toFixed(5))
  const calcRate = () => {
    const currentRate = parseFloat((window.innerWidth / window.innerHeight).toFixed(5))
    if (screenRef.value) {
      if (currentRate > baseProportion) {
        //表示更宽
        scale.width = ((window.innerHeight * baseProportion) / baseWidth).toFixed(5)
        scale.height = (window.innerHeight / baseHeight).toFixed(5)
        screenRef.value.style.transform = `scale(${scale.width},${scale.height})`
      } else {
        scale.height = (
          window.innerWidth /
          baseProportion /
          baseHeight
        ).toFixed(5);
        scale.width = (window.innerWidth / baseWidth).toFixed(5);
        screenRef.value.style.transform = `scale(${scale.width}, ${scale.height})`;
      }
    }
  }

  const resize = () => {
    clearTimeout(timer.value)
    timer.value = window.setTimeout(() => {
      calcRate()
    }, 200)
  }

  //改变窗口大小重新绘制
  const windowDraw = () => {
    window.addEventListener('resize', resize)
  }
  //改变窗口大小重新绘制
  const unWindowDraw = () => {
    window.removeEventListener('resize', resize)
  }
  return {
    screenRef,
    calcRate,
    windowDraw,
    unWindowDraw
  }
}